<template>
  <a-card :bordered="false">
    <!-- 查询区域 -->
    <div class="table-page-search-wrapper">
      <a-form layout="inline" @keyup.enter.native="searchQuery">
        <a-row :gutter="24">
          <a-col :sm="24" :md="12" :xl="8">
            <a-form-item label="用户手机">
              <a-input placeholder="请输入" v-model="queryParam.wechatMobile"></a-input>
            </a-form-item>
          </a-col>
          <a-col :sm="24" :md="12" :xl="8">
            <a-form-item label="微信昵称">
              <a-input placeholder="请输入" v-model="queryParam.wechatName"></a-input>
            </a-form-item>
          </a-col>
          <a-col :sm="24" :md="12" :xl="8">
            <a-form-item label="创建时间">
              <a-range-picker allowClear class="per100" v-model="tempTimes" @change="timeChange" />
            </a-form-item>
          </a-col>

          <a-col :sm="24" :md="12" :xl="8">
            <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
              <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
              <a-button @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>
            </span>
          </a-col>
        </a-row>
      </a-form>
    </div>

    <!-- table区域 -->
    <a-table
      ref="table"
      bordered
      size="middle"
      rowKey="id"
      :columns="columns"
      :dataSource="dataSource"
      :pagination="ipagination"
      :loading="loading"
      :scroll="{ x: 1200 }"
      @change="handleTableChange"
    >
      <template slot="avatarslot" slot-scope="text, record, index">
        <div class="anty-img-wrap">
          <a-avatar shape="square" :src="getAvatarView(record.avatar)" icon="user" />
        </div>
      </template>
      <span slot="action" slot-scope="text, record">
        <a-button @click="wechatUserRefund(record.id, 3)" type="success" class="ml5 mr5" size="small">提现</a-button>
        <a-button
          v-if="record.status === 0"
          @click="
            data.userId = record.id
            visible = true
          "
          type="orange"
          class="ml5 mr5"
          size="small"
          >拉黑</a-button
        >
        <a-button v-if="record.status === 1" type="primary" class="ml5 mr5" size="small" @click="deleteBlack(record.id)"
          >恢复</a-button
        >
      </span>
    </a-table>

    <a-modal v-model="visible" title="拉黑原因" @ok="joinBlack">
      <a-textarea v-model="data.blackReason" placeholder="请输入拉黑原因" />
    </a-modal>
  </a-card>
</template>

<script>
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import { initDictOptions, filterDictText } from '@/components/dict/JDictSelectUtil'
import Api from '@/api/MemberManage/MemberManage'
import { getAction, getFileAccessHttpUrl, postAction } from '@/api/manage'
import BlackApi from '@api/ServiceManage/BlackList'
import { formatAmountFromFenToYuan } from '@/utils/util'
import { RefundMixin } from '@/mixins/Refund'
import M from 'minimatch'

export default {
  name: 'MemberManage',
  mixins: [JeecgListMixin, RefundMixin],
  data() {
    return {
      url: {
        list: Api.list
      },
      data: {
        userId: '',
        blackReason: ''
      },
      columns: [],
      userStatusOptions: [],
      sexOptions: [],
      visible: false
    }
  },
  created() {
    this.columns = [
      {
        title: '序号',
        dataIndex: 'index',
        align: 'center',
        width: 100,
        customRender: (text, record, index) => `${index + 1}`
      },
      {
        title: '用户账号',
        align: 'center',
        dataIndex: 'wechatOpenid',
        sorter: (a, b) => {
          return a.wechatOpenid - b.wechatOpenid
        }
      },
      {
        title: '微信昵称',
        align: 'center',
        dataIndex: 'wechatName',
        sorter: (a, b) => {
          return a.wechatName - b.wechatName
        }
      },
      {
        title: '手机号',
        align: 'center',
        width: 100,
        dataIndex: 'wechatMobile',
        sorter: (a, b) => {
          return a.wechatMobile - b.wechatMobile
        }
      },
      {
        title: '头像',
        dataIndex: 'avatar',
        align: 'center',
        width: 60,
        scopedSlots: { customRender: 'avatarslot' }
      },
      {
        title: '性别',
        dataIndex: 'gender',
        align: 'center',
        width: 60,
        customRender: (text, record, index) => {
          //字典值替换通用方法
          return filterDictText(this.sexOptions, text)
        },
        sorter: (a, b) => {
          return a.gender - b.gender
        }
      },
      {
        title: '账户金额',
        dataIndex: 'amount',
        align: 'center',
        sorter: (a, b) => {
          return a.amount - b.amount
        },
        customRender: (text, record, index) => {
          return formatAmountFromFenToYuan(text)
        }
      },
      {
        title: '累计清空金额',
        dataIndex: 'clearAmount',
        align: 'center',
        sorter: (a, b) => {
          return a.clearAmount - b.clearAmount
        },
        customRender: (text, record, index) => {
          return formatAmountFromFenToYuan(text)
        }
      },
      {
        title: '账户最近修改时间',
        align: 'center',
        width: 150,
        dataIndex: 'updateTime',
        sorter: (a, b) => {
          return a.updateTime - b.updateTime
        }
      },
      {
        title: '状态',
        dataIndex: 'status',
        align: 'center',
        width: 80,
        customRender: (text, record, index) => {
          //字典值替换通用方法
          return filterDictText(this.userStatusOptions, text)
        },
        sorter: (a, b) => {
          return a.status - b.status
        }
      },
      {
        title: '创建时间',
        align: 'center',
        width: 150,
        dataIndex: 'createTime',
        sorter: (a, b) => {
          return a.createTime - b.createTime
        }
      },
      {
        title: '操作',
        dataIndex: 'action',
        fixed: 'right',
        width: 140,
        scopedSlots: { customRender: 'action' }
      }
    ]
  },
  methods: {
    // 初始化数据字典
    initDictConfig() {
      //初始化字典 - 性别
      initDictOptions('sex').then(res => {
        if (res.success) {
          this.sexOptions = res.result
        }
      })
      //初始化字典 - 用户状态
      initDictOptions('user_status').then(res => {
        if (res.success) {
          this.userStatusOptions = res.result
        }
      })
    },
    // 获取头像
    getAvatarView: function(avatar) {
      return getFileAccessHttpUrl(avatar)
    },

    joinBlack() {
      postAction(BlackApi.add, this.data).then(res => {
        this.$message.success(res.message)
        this.visible = false
        this.loadData()
      })
    },

    deleteBlack(id) {
      getAction(BlackApi.deleteByUserId + id).then(res => {
        this.$message.success(res.message)
        this.loadData()
      })
    },

    // 创建时间改变
    timeChange(e, arr) {
      if (arr[0]) {
        this.queryParam.startTime = arr[0]
        this.queryParam.endTime = arr[1]
      } else {
        this.queryParam.startTime = undefined
        this.queryParam.endTime = undefined
      }
    }
  }
}
</script>

<style scoped></style>

